<template>
  <div class="good-detail">
    <div class="goods-content">
      <md-scroll-view ref="scrollView" :auto-reflow="true" :scrolling-x="false">
        <section>
          <md-swiper ref="swiper" :is-prevent="false" :useNative-driver="false">
            <md-swiper-item :key="$index" v-for="(item, $index) in img">
              <img v-if="data" :src="$api.imgUrl + item" alt="" />
            </md-swiper-item>
          </md-swiper>
          <div class="content">
            <div class="left">
              <h1>{{ data.name }}</h1>
              <span>￥{{ data.price }}</span>
            </div>
            <div class="right">
              <span>hot</span><br />
              <span>库存:{{ data.stock }}</span>
            </div>
          </div>
        </section>
        <section class="secondary">
          <span>商品规格:{{ data.size }}</span>
        </section>
        <section
          class="comment"
          @click="$commonJs.goPage('goodsComment', $route.params.id)"
        >
          <div class="header">
            <span>评价（{{ comment.eval_count }}）</span>
            <span class="more"
              >查看更多 &nbsp;<md-icon size="sm" name="arrow-right"></md-icon
            ></span>
          </div>
          <div v-if="comment.eval_count > 0">
            <div class="avatar">
              <img
                :src="
                  comment.img_head ? $api.imgUrl + comment.img_head : usrImage
                "
                alt=""
              />
              {{ comment.username }}
            </div>
            <div>{{ comment.eval_content }}</div>
          </div>
          <div v-else class="no-comment">
            暂无评价
          </div>
        </section>
        <section class="detail">
          <h1>商品详情</h1>
          <div v-html="data.detail"></div>
        </section>
      </md-scroll-view>
    </div>
    <div class="btn-wrapper-action">
      <md-button type="primary" @click="isPopupShow = true"
        >添加购物车</md-button
      >
      <md-button type="warning" @click="goPage">立即购买</md-button>
    </div>
    <md-popup v-model="isPopupShow" position="bottom">
      <md-popup-title-bar
        title="加入购物车"
        @confirm="hidePopUp('bottom')"
        @cancel="hidePopUp('bottom')"
      ></md-popup-title-bar>
      <div class="md-example-popup md-example-popup-bottom addCard">
        <div class="count-box">
          <span>数量：</span
          ><md-stepper
            slot="right"
            v-model="num"
            :min="1"
            :max="data.stock"
          ></md-stepper>
        </div>
        <md-button type="warning" @click="addCart">添加至购物车</md-button>
      </div>
    </md-popup>
  </div>
</template>

<script>
import {
  Popup,
  PopupTitleBar,
  ScrollView,
  Swiper,
  SwiperItem,
  Icon,
  ActionBar,
  Button,
  Stepper
} from "mand-mobile";
import usrImage from "@/assets/img/user.png";
export default {
  name: "index",
  components: {
    [Stepper.name]: Stepper,
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar,
    [ScrollView.name]: ScrollView,
    [Icon.name]: Icon,
    [Swiper.name]: Swiper,
    [SwiperItem.name]: SwiperItem,
    [ActionBar.name]: ActionBar,
    [Button.name]: Button
  },
  data() {
    return {
      isPopupShow: false,
      btns: [
        {
          type: "warning",
          text: "立即购买",
          onClick: this.handleClick
        }
      ],
      data: {
        img: null,
        name: "",
        stock: 1
      },
      num: 1,
      comment: {},
      img: [],
      usrImage
    };
  },
  methods: {
    goPage() {
      let obj = {
        id: this.$route.params.id,
        address: ""
      };
      this.$store.dispatch("changeOrder", obj);
      this.$commonJs.goPage("shoppingOrder", this.$route.params.id);
    },
    getInfo(refresh) {
      this.$ajax
        .post(
          this.$api.goodsDetail,
          {
            goods_id: this.$route.params.id
          },
          false
        )
        .then(res => {
          if (refresh) {
            this.data = res.data.goods_info;
            this.comment = res.data.eval_info;
            this.$store.dispatch(
              "changeCurrentRouterName",
              res.data.goods_info.name
            );
            this.img = JSON.parse(res.data.goods_info.img);
          }
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    },
    addCart() {
      this.$ajax
        .post(
          this.$api.addCart,
          {
            product_id: this.$route.params.id,
            num: this.num
          },
          false
        )
        .then(() => {
          this.isPopupShow = false;
          this.$toast.succeed("添加成功，在购物车等亲~");
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    }
  },
  created() {
    this.getInfo(true);
  }
};
</script>

<style scoped lang="stylus">
.good-detail{
  height 100%;
  font-size 0;
  flex_content();
  flex_column();
  .goods-content{
    flex: auto;
    height: 100%;
    overflow: hidden;
    section{
      margin-bottom 14px
      background white;
    }
    .content{
      border-top 1px solid #f0f0f0;
      padding 30px 23px;
      flex_content();
      flex_justify_space();
      .left{
        font-size 26px;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        h1{
          color:rgba(51,51,51,1);
          margin-bottom 19px
        }
        span{
          color:rgba(237,114,27,1);
        }
      }
      .right{
        flex_content();
        flex_justify_space();
        flex_column()
        text-align right;
        font-size:18px;
        font-weight:400;
        color:rgba(153,153,153,1);
      }
    }
    .secondary{
      padding 32px 25px;
      font-size:20px;
      font-family:PingFang-SC-Regular;
      font-weight:400;
      color:rgba(102,102,102,1);
    }
    .detail{
      padding 32px 25px;
      font-size:24px;
      font-family:PingFang-SC-Regular;
      font-weight:400;
      color:rgba(102,102,102,1);
      line-height:37px;
      background #f0f0f0
      h1{
        text-align center
      }
    }
    .comment{
      padding 39px 25px;
      font-size:24px;
      font-family:PingFang-SC-Regular;
      font-weight:400;
      color:rgba(51,51,51,1);
      .header{
        flex_content();
        flex_justify_space();
        margin-bottom 19px
        .more{
          color:rgba(237,114,27,1);
        }
      }
      .avatar{
        font-size:18px;
        font-family:PingFang-SC-Regular;
        font-weight:400;
        color:rgba(153,153,153,1);
        margin-bottom 19px;
        img{
          width 42px
          height 42px
          border-radius 50%
          vertical-align middle
        }
      }
      .no-comment{
       text-align center;
      }

    }
  }

  .btn-wrapper-action{
    height 80px;
    flex_content();
  }
}
.count-box{
  font-size 24px
  margin-bottom 30px
  flex_content();
  flex_align_center();
  flex_justify_center();
}
.md-example-popup
  position relative
  font-size 28px
  font-family DINPro
  font-weight 500
  box-sizing border-box
  text-align center
  background-color #FFF
.md-example-popup-bottom
  width 100%
  padding 30px 24px
</style>
